import React, { Component } from 'react';
import '../asserts/css/cart.css'
import {cartList,toSwiftArr} from '../request/cart.js'
class Cart extends Component {
    state = {
        getCartList:[
            {content:[]},
            {content:[]}
        ],
        toProducer:[],     //结合后的数组
        allChecked:false
    }
     UNSAFE_componentWillMount()
     {
         let uid  =JSON.parse(localStorage.getItem("logindata")).uid
         cartList(uid).then(res=>{
                if(res.code === 200)
                {
                    this.setState({getCartList:res.list})
                   this.setState({toProducer:toSwiftArr(this.state.getCartList)}) 
                }
         })        
     }
     changeStatus(index)
     {
        this.state.toProducer.forEach((item,i)=>{
            if(i === index)
            {
                item.checked = !item.checked
            }
        })
        this.setState({toProducer:this.state.toProducer})
         this.setState({allChecked:this.state.toProducer.every(item=>{     //
             return item.checked === true
         })})
     }
     //改变全选状态
     changeAllStatus()
     {
         this.setState({allChecked:!this.state.allChecked})
         this.state.toProducer.forEach((item)=>{
                item.checked = !this.state.allChecked
        })
        this.setState({toProducer:this.state.toProducer})
     }
    render() {
        let {toProducer,allChecked} = this.state
        return (
                <div className="cartContainer">
                <div className="page-title">购物车</div>
        <ul className="cart-list">
           {
               toProducer.map((item,index)=>{
                   return  <li key={item.id}>
                   <input type="checkbox" checked={item.checked}  onChange={()=>this.changeStatus(index)}/>
                   <img src={this.$staticUrl+item.img} alt="" />
                   <div>
                       <h5>{item.goodsname}</h5>
                       <h5 className="price">
                           &yen;{item.price}
                           <span className="market-price">&yen; {item.price}</span>
                       </h5>
                   </div>
                   <div className="stepper">
                       <button>-</button>
                       <span>{item.num}</span>
                       <button>+</button>
                   </div>
               </li>
               })
           }
        </ul>
        <div className="submit-bar">
            <label><input type="checkbox" checked={allChecked} onChange={this.changeAllStatus.bind(this)}/> 全选</label>
            <div className="price">订单总金额: &yen; 7999</div>
            <button className="btn-order">去结算(2件)</button>
        </div>
                </div>
        );
    }
}

export default Cart;